import React from 'react'
import PropTypes from 'prop-types'
import { Animated, Text, StyleSheet, View } from 'react-native'
import { NAVIGATIONBAR_HEIGHT, IS_IPHONEX, ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import ShareBtn from 'src/components/button/ShareBtn'
export const MARGINTOP = IS_IPHONEX ? NAVIGATIONBAR_HEIGHT - 7 : NAVIGATIONBAR_HEIGHT + 7 // Scollview的marginTop
// navigationbar上设置按钮出现时，距离顶部距离
const NAVISETTOP = IS_IPHONEX ? 49 : 29
// navigationbar上设置按钮出现时，Scollview的top
const BGDistance = MARGINTOP + 3 - NAVISETTOP

export default class AnimatedNaviBar extends React.PureComponent {
  render () {
    const {
      userName,
      scrollY,
      setBtnClick,
      userNameClick,
      shareBtnClick,
      role
    } = this.props
    return (
      <Animated.View style={[styles.naviContainer, {
        opacity: scrollY.interpolate({
          inputRange: [0, BGDistance],
          outputRange: [0, 1]
        })
      }]}>
        <Animated.View style={[styles.naviBar, {
          opacity: scrollY.interpolate({
            inputRange: [0, BGDistance - 1, BGDistance],
            outputRange: [0, 0, 1]
          })
        }]}>
          <CustomButton
            onPress={userNameClick}
          >
            <Text style={styles.natiTitle}>{userName}</Text>
          </CustomButton>
          {/* {role === 'B' && <CustomButton style={styles.setBtn} onPress={setBtnClick}>
            <CustomImage
              style={styles.setImg}
              source={require('@/imgC/company/btn_set.png')}
            />
          </CustomButton>}
          {role === 'C' && <View style={styles.setBtn}>
            <ShareBtn onPress={shareBtnClick}/>
          </View>} */}
          <View style={styles.setBtn}>
            <ShareBtn onPress={shareBtnClick}/>
          </View>
        </Animated.View>
      </Animated.View>
    )
  }
}

const styles = StyleSheet.create({
  naviContainer: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: NAVIGATIONBAR_HEIGHT,
    backgroundColor: '#FFFFFF'
  },
  naviBar: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 44,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  natiTitle: {
    fontSize: ScaleT(17),
    color: '#030303',
    fontWeight: '400'
  },
  setBtn: {
    position: 'absolute',
    top: 9,
    right: ScaleS(30),
    width: 26,
    height: 26
  }
})
